<template>
  <div :style="{padding:'8px 0 5px 0', 'text-align': align}">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1,10, 20, 40, 50, 100]"
      :page-size="10"
      background
      layout="total, sizes, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import Vue from "vue";
import "element-ui/lib/theme-chalk/index.css";
import { Pagination } from "element-ui";
Vue.use(Pagination);

export default {
  name: "awesome-pagination",
  props: {
    page: {
      type: Object,
      default: function() {
        return {
          maxResultCount: 10,
          skipCount: 0
        };
      }
    },
    total: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    currentPage: {
      type: Number,
      default: function() {
        return 1;
      }
    },
    align: { type: String, default: "left" }
  },
  methods: {
    handleCurrentChange: function(val) {
      this.page.skipCount = (val - 1) * this.page.maxResultCount;
      this.$emit("change", this.page);
    },
    handleSizeChange: function(val) {
      this.page.maxResultCount = val;
      this.$emit("change", this.page);
    }
  }
};
</script>
